import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    TextInput,
    ScrollView,
    ActivityIndicator,
} from 'react-native';
import moment from 'moment';
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import Constant from '../../../utils/Constant'//全局变量
import Header from "../../../components/header";
import Loading from '../../../utils/Loading';
import PublishCarArrow from '../publishCar/components/PublishCarArrow';
import { ToastToUser } from '../../../utils/CustomToast';
import Picker from 'react-native-picker'
import DatePickerPart from '../../../components/Tool/DatePickerPart'
import { CarSaleStatus } from '../../../utils/Enum'
import { getImgUrl } from '../../../utils/ComFunction'
import AsyncImage from '../../../components/image/AsyncImage';



let navigation

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;

export default class CarFoursPicReportPage extends Component {

    constructor(props) {
        super(props);
        let reportPics = this.props.route && this.props.route.params && this.props.route.params.reportPics ? this.props.route.params.reportPics : []
        console.log('reportPics = ',reportPics)
        this.state = {
            reportPics,
            dataArray: [],
        }
    }

    componentWillMount() {
        let tempData = []
        console.log('this.state.reportPics = ',this.state.reportPics)
        this.state.reportPics.map((item, index) => {
            tempData.push({
                url: item,
                height: screenH
            })
        })

        let total = this.state.reportPics.length
        let tempArray = []

        this.state.reportPics.map((item, index) => {
            console.log('getImgUrl() = ',getImgUrl(item))
            Image.getSize(getImgUrl(item), (width, height) => {
                
                console.log('width = ',width,height)

                tempArray.push({
                    url: item,
                    height: Math.floor(screenW / width * height)
                })

                if (tempArray.length == total) {
                    this.setState({
                        dataArray: tempArray
                    })
                }
            }, error => {

            });
        })

        ///img/202506/07dde206ef374f28bf1222379c314f6c.jpg
        // this.setState({
        //     dataArray: tempData
        // }, function() {
            
        // })

        
    }

    componentWillUnmount() {

    }

    componentDidMount() {

    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'报告详情'} />

                <View style={{ flex: 1 }}>
                    <FlatList
                        data={this.state.dataArray}
                        renderItem={this.renderItemView.bind(this)}
                        extraData={this.state}
                        onEndReachedThreshold={0.2}
                        ListEmptyComponent={this.renderEmpty.bind(this)}
                    />

                </View>

            </View>
        );
    }

    renderEmpty() {
        return (
            <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
        )
    }

    renderItemView({ item, index }) {
        return (
            <View style={{width: '100%',marginBottom: 10}}>
                <AsyncImage style={{ width: '100%', height: item.height }} source={{ uri: getImgUrl(item.url) }} />
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        backgroundColor: '#f9f9f9',
    },

    itemBg: {
        width: '100%',
        height: 78,
        paddingTop: 10,
        paddingHorizontal: 10,
    },
    itemBox: {
        backgroundColor: '#fff',
        width: '100%',
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingHorizontal: 16,
    },
    companyImg: {
        width: 46,
        height: 46,
        borderRadius: 23,
    },
    itemDesBox: {
        flex: 1,
        flexDirection: 'column',
        marginLeft: 20,
        justifyContent: 'center',
        alignItems: 'flex-start',
    },
    itemTitleText: {
        fontSize: 15,
        color: '#333',
    },
    itemDesText: {
        marginTop: 8,
        fontSize: 12,
        color: '#999',
    },
    arrowImg: {
        marginLeft: 10,
        width: 15,
        height: 15
    },

    footer: {
        flexDirection: 'row',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f6f6f6'
    },
    loadMoreTextStyle: {
        fontSize: 14,
        color: '#999999',
        marginStart: 10,
    },

})